<template>
  <div>
    123
    <el-button @click="add(1)">单选</el-button>
    <el-button @click="add(2)">多选</el-button>
    <div class="title">
      <table  border="0" cellspacing="30" cellpadding="0">
        <tr>
          <td colspan="2">计划</td>
          <td>计划</td>
          <td>计划</td>
          <td>计划</td>
        </tr>
        <tr v-for="item in list" :key="item.id">
          <td>{{item.type | str}}</td>
          <td>
            <el-input v-model="item.number"></el-input>
          </td>
          <td><el-input v-model="item.grade"></el-input></td>
          <td>
            {{item.nan}}
            <el-select v-model="item.nan">
              <el-option v-for="it in option" :value="it.value" :key="it.value" :label="it.label"></el-option>
            </el-select>
          </td>
          <td><el-input v-model="item.total"></el-input></td>
          <td><el-button>删除</el-button></td>
        </tr>
      </table>
      {{list}}
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    add(number) {
      let id = this.list.length + 1
      if (number === 1) {
        let obj = {
          type: 1,
          number: "",
          grade: "",
          total: "",
          nan: "",
          id: id
        }
        this.list.push(obj)
      }
      if (number === 2) {
        let obj = {
          type: 2,
          number: "",
          grade: "",
          total: "",
          nan: "",
          id: id
        }
        this.list.push(obj)
      }
    }
  },
  filters: {
    str: function (val) {
      let arr = [
        {
          type: 1,
          name: "单选题"
        },
        {
          type: 2,
          name: "多选题"
        }
      ]
      let obj = arr.find(res=>{
        return res.type === val - 0
      })
      if (obj) {
        return obj.name
      } else {
        return "未知题型"
      }
    }
  },
  data() {
    return {
      option: [{
        value: "1",
        label: "简单"
      },{
        value: "2",
        label: "适中"
      },{
        value: "3",
        label: "困难"
      }],
      list: [{
        type: 1,
        number: "",
        grade: "",
        total: "",
        nan: "",
        id: 1
      },
      {
        type: 2,
        number: "",
        grade: "",
        total: "",
        nan: "",
        id: 2
      }]
    }
  }
}
</script>

<style>

</style>